<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <!-- 
      一、计算属性：
        对于任何复杂逻辑，都应当使用计算属性
        计算属性看似是一个函数，但它返回了一个结果，只要依赖的值不改变，那么计算属性的值就不会改变
        多次调用，只执行一次
      1.计算属性的优点：
        减少模板中的计算逻辑 -- 不要把表达式都写在页面中
        进行数据缓存 -- 调用多次，执行一次 / 多个地方使用，就只执行一次
        依赖固定的数据类型(响应式数据) -- a+b计算出c,a或者b改变时，c会同步改变
      2.计算属性有getter、setter方法
        直接调用计算属性，就是调用它的getter方法

      二、计算属性( computed )  PK 方法(methods):
        计算属性：只要值不变，不管调用几次，都只执行一次
        方法：调用几次就执行几次
        所以：如果 方法和计算属性都能解决问题的时候，优先选择计算属性
        结论：在特定的条件下，计算属性具有依赖性，只要依赖的值不发生改变，则计算属性只执行一次，而方法是调用几次就执行几次

      三、计算属性( computed )  PK 监听属性(methods):
        computed 是计算属性，依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容。
        watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。 
        所以:一般来说 需要依赖别的属性来动态获取值的时候可以使用computed,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用watch。

        在特定条件下：计算属性 优于 监听属性
        监听属性监听的是同一个数据：data中的名字和watch中的名字是相同的  
        计算属性的变量不需要在data(){}中定义，监听属性的变量需要在data(){}中定义。
    -->
    <div id="app">
        
    </div>
</body>
<script>
    new Vue({
      el:'#app',
      data:{
      
      }
      
    })
</script>
</html>